@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-bg: #262626;
    --color-fg: #1a1a1a;
    --color-primary: #8457f4;
    --color-accent: #ffffff;
    --color-bg-light: #313131;
}

@keyframes text-focus-in {
    0% {
        filter: blur(5px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.text-focus-in {
    animation: text-focus-in 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes fade-in-fwd {
    0% {
        transform: translateZ(-80px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

.fade-in-fwd {
    animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-bottom {
    animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.powered-by {
    font-size: 13px;
}